<template>
  <view class="cart">
    <view v-if="showCartList" class="cart_content">
      <view v-if="cartItems" class="cart_content_header">
        <view @click="handleTrigerSelectAll" class="cart_content_header_all">
          <template>
            <view class="checkbox" :class="selectedAll ? 'selected' : ''">
              <uni-icons class="selected-icon" type="checkmarkempty" size="28rpx" color="white"></uni-icons>
            </view>
            全选<text class="cart_content_header_all_tip">(共{{ totalGoodsCount }}件商品)</text>
          </template>
        </view>
        <view class="cart_content_header_clear" @click="clearCart">
          <view class="cart_content_header_clear_icon">
            <image src="/static/image/cart_clear.png" mode="widthFix" />
          </view>
          <view>清空购物车</view></view
        >
      </view>
      <scroll-view scroll-y="true" style="max-height: 570rpx">
        <view v-if="cartItems.length" class="cart_content_item" v-for="(item, index) in cartItems" :key="item[selectKey]">
          <!-- <uni-icons class="delete-icon" @click="handleCartDelete(index)" type="clear" size="36rpx"></uni-icons> -->
          <view class="cart_content_item_pic">
            <view class="checkbox" @click="handleTriggerSelect(item)" :class="item.selected ? 'selected' : ''">
              <uni-icons class="selected-icon" v-if="item.selected" type="checkmarkempty" size="28rpx" color="white"></uni-icons>
            </view>
            <image mode="aspectFill" class="cart_content_item_pic_image" :src="item.mainImage ? item.mainImage : image" @click="handleToDetail(item, index)"> </image>
          </view>
          <view class="cart_content_item_info">
            <view class="cart_content_item_info_name" @click="handleToDetail(item, index)">{{ item.goodsName }}</view>

            <view class="cart_content_item_info_footer">
              <view class="cart_content_item_info_footer_price">
                <view class="unit">￥</view>
                <view class="price">{{ item.taxPrice ? item.taxPrice.toFixed(2) : '0' }}</view>
              </view>
              <cartNumAddSub :item="item" :index="index" @handleOperateCount="handleOperateCount" @updateGoodCount="updateGoodCount"></cartNumAddSub>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="shoppingBox flex flex-row">
      <uni-badge size="small" :text="totalNum" absolute="rightTop" :customStyle="{ background: 'red' }">
        <image @tap="showCartPop" class="img" src="/static/image/shop_cart_icon.png" mode="widthFix" />
      </uni-badge>

      <view class="price">{{ totalPrice }}</view>
      <view class="settlement flex a-item j-content" @tap="jump('settlement')"> 去结算 </view>
      <!-- <view class="redDot flex a-item j-content" @tap="jump('shoppingCart')">{{ selectedGoodsList.length }}</view> -->
    </view>
  </view>
</template>

<script>
import pub from '@/utils/pub.js'
import cartNumAddSub from './cartNumAddSub.vue'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'shoppingCart',
  components: { cartNumAddSub },
  props: {
    default: [],
    visible: {
      type: Boolean,
      default: true,
    },

    selectKey: {
      type: String,
      default: '_id',
    },
    showCartList: {
      type: Boolean,
      default: false,
    },
  },
  onLoad(option) {
    console.log(option)
  },
  data() {
    return {
      image: 'https://www.zjjqf.cn/file/static/undefined.png',

      selectedPrice: 0,
    }
  },
  mounted() {},
  computed: {
    ...mapState({
      cartItems: state => state.cart.cartItems,
    }),
    ...mapGetters(['totalPrice', 'totalGoodsCount', 'totalNum']),
    selectedAll() {
      const list = this.cartItems.filter(item => item.selected)
      return list.length === this.cartItems.length
    },
  },
  watch: {},
  methods: {
    showCartPop() {
      this.$emit('showCartPop')
    },
    jump(type) {
      //显示购物车详情

      this.$emit('jump')
    },
    handleTriggerSelect(item) {
      //购物车选择
      this.$emit('triggerSelect', item)
    },
    handleTrigerSelectAll(item) {
      // 购物车全选
      this.$emit('triggerSelectAll', !this.selectedAll)
    },
    handleOperateCount(params) {
      this.$emit('operateCount', { ...params })
    },

    clearCart() {
      this.$emit('clearCart')
    },
    handleToDetail(item, index) {
      this.$emit('goDetail', { item: item, index: index })
    },
    updateGoodCount(params) {
      this.$emit('updateGoodCount', params)
    },
  },
}
</script>

<style lang="scss" scoped>
.cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 98;
  background-color: #f5f6fa;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;

  &_content {
    margin:30rpx 20rpx;
    &_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;
      &_all {
        display: flex;
        align-items: center;
        font-weight: bold;
        &_tip {
          font-weight: normal;
          font-size: 24rpx;
          color: #666666;
          margin-left: 10rpx;
        }
      }
      &_clear {
        display: flex;
        align-items: center;
        font-weight: bold;
        color: #666;
        &_icon {
          width: 30rpx;
          margin-right: 10rpx;
        }
      }
    }

    &_item {
      display: flex;
      align-items: center;
      background-color: white;
      border-radius: 10rpx;
      padding: 20rpx;
      border-bottom: 1rpx solid #edeff4;
      &_pic {
        display: flex;
        align-items: center;
        &_image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 10rpx;
        }
      }
      &_info {
        margin-left: 10rpx;
        display: flex;
        flex-direction: column;
        flex: 1;
        &_footer {
          display: flex;
          justify-content: space-between;
          margin-top: 20rpx;
          &_price {
            display: flex;
          }
          &_num {
            display: flex;

            &_count {
              font-size: 24rpx;
              width: 80rpx;
              text-align: center;
            }

            &_symbol-substract {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40rpx;
              height: 40rpx;
              border: 1rpx solid #ff8f00;
              border-radius: 50%;
            }
            &_symbol-add {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              color: white;
              background: linear-gradient(to left, #ff8f00, #ffb300);
            }
          }
        }
      }
    }
  }
}
.shoppingBox {
  background-image: linear-gradient(to bottom, #ffffff, #ffffff, #fff9d7);
  height: 100rpx;
  align-items: center;
  color: #ffffff;
  position: relative;
  .img {
    width: 100rpx;

    margin-left: 30rpx;
  }
  .settlement {
    background: linear-gradient(to right, #ffb300, #ff8f00);
    color: #ffffff;
    width: 200rpx;
    position: absolute;
    right: 20rpx;
    height: 80%;
    border-radius: 50rpx;
    font-size: 35rpx;
  }
  .price {
    color: red;
    width: 300rpx;
    display: flex;
    align-items: center;
    font-size: 48rpx;
    padding-left: 30rpx;
    &:before {
      content: '￥';
      font-size: 26rpx;
    }
  }
}
.redDot {
  min-width: 40rpx;
  height: 40rpx;
  background: red;
  border-radius: 40rpx;
  border: #ffffff 2px solid;
  position: absolute;
  left: 120rpx;
  top: 0;
}
.checkbox {
  display: flex;
  justify-items: center;
  align-items: center;
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  margin: 0 24rpx 0 8rpx;

  &.selected {
    border: 2rpx solid transparent;
    background: linear-gradient(to left, #ff8f00, #ffb300);
    color: white;
    .selected-icon {
      margin: 2rpx;
      color: #fff !important;
    }
  }
}
.symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30rpx;
  height: 30rpx;
  background: rgb(240, 240, 240);
}
</style>
